<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 全选
        function checkAll() {
// document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
//             该集合操作与数组相同，集合中每个元素都是dom对象
// 这个集合是有序的，集合中的元素顺序是他们在HTML页面中从上到下的顺序
           var Ahobby=document.getElementsByName("hobby");
           // alert(Ahobby[0].value);
            //alert(Ahobby[0].checked);//读取他的值
// checked表示复选框的选中状态，选中为true，不选中为false，该属性可读可写
            //Ahobby[1].checked=true;//为checked赋值
            //Ahobby[2].checked=true;//该全选方法可行但过于愚蠢
// 全选实现
            for (i=0;i<Ahobby.length;i++){
    Ahobby[i].checked=true;
            }

        }


        // 反选
        function cancel() {
            var Ahobby = document.getElementsByName("hobby");
            for (var i = 0; i < Ahobby.length; i++) {

                // 直接取反，一行搞定
                Ahobby[i].checked=!Ahobby[i].checked;


                if (Ahobby[i].checked) {
                    //取出每一个点的checked
                    Ahobby[i].checked = false;
                } else {
                    Ahobby[i].checked = true;
                }
            }
        }

        // 全不选
        function Inverse() {
// 全选后再全部取消
            var Ahobby=document.getElementsByName("hobby");
            for (i=0;i<Ahobby.length;i++){
Ahobby[i].checked=false;
            }
        }
    </script>
</head>
<body>
兴趣爱好：<input type="checkbox"name="hobby"value="java"checked="checked">Java
        <input type="checkbox"name="hobby"value="PHP">PHP
        <input type="checkbox"name="hobby"value="Python">Python
<br>
<button onclick="checkAll()">全选</button>
<button onclick="cancel()">反选</button>
<button onclick="Inverse()">不选</button>

</body>
</html>